import { html } from "../utils/html";
import { ComponentClass } from "../components/ComponentClass";
import { PageTileSelector } from "./PageTileSelector"
import { PageTileEditor } from "./PageTileEditor";
import { PageMapEditor } from "./PageMapEditor";
import overlay from "../components/Overlay";
import { PageClass } from "./PageClass";
import { getText } from "../utils/translate";
// style
const headerFrame = {
  position: "fixed",
  margin: "0px",
  width: "100%",
  height: "2em",
  lineHeight: "2em",
  borderBottom: "1px solid blue",
  borderBottomLeftRadius: "1em",
  borderBottomRightRadius: "1em",
  display: "flex",
  backgroundColor: "#FFFFFF",
  zIndex: "99",
}
const headerNavBtn = {
  flex: "1 1 auto",
  color: "blue",
  textAlign: "center",
  cursor: "pointer",
}
const bodyFrame = {
  position: "absolute",
  width: "100%",
  margin: "2em auto 0 auto",
}

export class MainFrame extends ComponentClass{
  constructor(){
    super();
    this.body = html`<div style=${bodyFrame}>
      <button onclick=${async ()=>{
        let close = overlay.loading();
        setTimeout(() => {
          close();
        }, 3000);
        // let resault = await overlay.alert("Hello Alert!\nHello Dragon!");
        // console.log("dialog callback",resault);
        // let dialog = overlay.dialog("HelloDragon",()=>new Promise((rs)=>setTimeout(rs,1000)),()=>true);
        // dialog.show();
      }}>测试按钮</button>
    </div>`;
    this.pageTileSelector = new PageTileSelector();
    this.pageTileEditor = new PageTileEditor();
    this.pageMapEditor = new PageMapEditor();
    this.element = html`
    <div>
      <div style=${headerFrame}>
        <div style=${{...headerNavBtn,borderRight:"1px solid blue"}} onclick=${this.btnClickChange.bind(this,this.pageTileSelector)}>${getText("mainframe_button_top_left")}</div>
        <div style=${{...headerNavBtn,borderRight:"1px solid blue"}} onclick=${this.btnClickChange.bind(this,this.pageTileEditor)}>${getText("mainframe_button_top_center")}</div>
        <div style=${{...headerNavBtn}} onclick=${this.btnClickChange.bind(this,this.pageMapEditor)}>${getText("mainframe_button_top_right")}</div>
      </div>
      ${this.body}
      ${overlay.element}
    </div>
    `;
    this.body.addEventListener("contextmenu",event=>event.preventDefault());
    this.body.addEventListener("selectstart",event=>event.preventDefault());
    this.element.children[0].addEventListener("selectstart",event=>event.preventDefault());
    // finished init stage
    this.changePage(this.pageTileSelector);
  }
  btnClickChange(pageName){
    this.changePage(pageName);
  }
  changePage(pageCls){
    let last = this["lastPage"];
    if (last instanceof PageClass){
      last.onUnmount();
    }
    this.body.innerHTML = "";
    this.body.append(pageCls.element);
    this["lastPage"] = pageCls;
    if (pageCls instanceof PageClass){
      pageCls.onMount();
    }
  }
}